import { SetupContext, defineComponent, inject, onMounted, ref } from 'vue';
import { ExtendPanelPropsType, ExtendPanelProps } from '../extend-panel.props';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
import { useStyleVariable } from '../composition/use-css-variable';
import { useClassName } from '../composition/use-class-name';
import { useDomChange } from '../composition/use-dom-change';
import { useEvents } from '../composition/use-events';
import getItemRender from '../components/item.component';
import '../extend-panel.css';

export default defineComponent({
    name: 'FExtendPanelDesign',
    props: ExtendPanelProps,
    emits: ['clickCover'],
    setup(props: ExtendPanelPropsType, context: SetupContext) {
        const elementRef = ref();
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        const componentInstance = useDesignerComponent(elementRef, designItemContext);
        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;
        })
        context.expose(componentInstance.value);

        const extendPanelRef = ref<HTMLElement>();
        let checked = ref(undefined);
        const { coverWidth, contentWidth } = useDomChange(props, context, extendPanelRef);
        const { styleVariable, itemStyleVariable } = useStyleVariable(props, context, coverWidth, contentWidth);
        const { startTransitionClassName, checkedClassName } = useClassName(props, context, checked);
        const { onClickItem } = useEvents(props, context, extendPanelRef, coverWidth, checked);
        const itemRender = getItemRender(props, context, {
            onClickItem,
            checkedClassName,
            itemStyleVariable
        })
        return () => {
            return <div ref={elementRef} class='drag-container' dragerf={`${designItemContext.schema.id}-container`}>
                <div ref={extendPanelRef} class={startTransitionClassName.value}>
                    <div class='f-extend-panel-layout' style={styleVariable.value}>
                        {itemRender()}
                    </div>
                </div>
            </div>;
        };
    }
});